import React from 'react';
import { Card } from 'reactstrap';
import Chart from 'react-apexcharts';
import { numbFormat } from '../../../helpers/utils'

const AnalyticsCard = (props) => {
  const options = {
    chart: {
      id: "subscribers",
      toolbar: {
        show: false
      },
      sparkline: {
        enabled: true
      },
      parentHeightOffset: 15
    },
    grid: {
      show: false
    },
    colors: props.percent.color ? [props.percent.color] : ['#727cf5'],
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: "smooth",
      width: 2.5
    },
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 0.9,
        opacityFrom: 0.7,
        opacityTo: 0.5,
        stops: [0, 80, 100]
      }
    },

    xaxis: {
      labels: {
        show: false
      },
      axisBorder: {
        show: false
      }
    },
    yaxis: {
      labels: {
        show: false
      }
    },
    tooltip: {
      x: { show: false }
    },
    markers: {
      strokeWidth: 2,
      hover: {
        sizeOffset: 4
      }
    }
  }

  const type = props.type || 'area';
  const series = [{ name: props.title || 'Data', data: props.data || [] }];

  return (

    <Card className="analytics-card-container">
      <div className="d-flex justify-content-between statistics-card">
        <div className="d-flex justify-content-between st-card-title__count">
          <h3 className="analytics-card__title">{ props.title }</h3>
          <h2 className="analytics-card__value mb-0">{ numbFormat(props.count) }</h2>
        </div>
        <div className="pl-0 st-card-charts__percent">
          <Chart className="apex-charts st-card-chart" options={ options } series={ series } type={ type } height={37} />
          <span style={ { color: props.percent.color } } className="st-card-percent">{ props.percent.value }</span>
        </div>
      </div>
    </Card>

  )
};

export default AnalyticsCard;
